<template>
  <!-- 公共loading组件 -->
  <load :loading="loading" />
  <!-- 主体内容 -->
  <div v-if="loading == false">
    <!-- 公共标题组件 -->
    <Header v-on:closeMenu="closeMenu" :show="showRef" />
    <main id="main" >
      <!-- 公共导航组件 -->
      <Menu v-on:showMenuByChild="showMenuByChild" />
      <!-- 主体内容 -->
      <section class="archive">
        <!-- <div> -->
        <div class="tab-left">
          <div v-for="(item, index) in categoryList" :key="index" @click="getData(item.id)" class="menus">{{item.name}}</div>
        </div>
        <div class="tab-right" >
          <!-- 工具详情 -->
          <div
              class="detail"
              v-for="(it, ind) in toolsList"
              :key="ind"
              @click="openUrl(it.url)"
            >
              <div class="one">
                <div class="icon">
                  <img :src="it.icon" />
                </div>
                <div class="title">{{ it.name }}</div>
              </div>
              <div class="two">{{ it.desc }}</div>
          </div>
        </div>
          <!-- <a-tabs v-model:activeKey="activeKey" :tab-position="mode" @tabClick="getData">
            <a-tab-pane
              v-for="(item, index) in categoryList"
              :key="index"
              :tab="item.name"
            >
              <div
                class="detail"
                v-for="(it, ind) in toolsList"
                :key="ind"
                @click="openUrl(it.url)"
              >
                <div class="one">
                  <div class="icon">
                    <img :src="it.icon" />
                  </div>
                  <div class="title">{{ it.name }}</div>
                </div>
                <div class="two">{{ it.desc }}</div>
              </div>
            </a-tab-pane>
          </a-tabs> -->
        <!-- </div> -->
      </section>
    </main>
    <!-- 抽屉组件 -->
    <drawer v-on:showMenuByChild="showMenuByChild"></drawer>
    <!-- 置顶和IM按钮 -->
    <TopIM />
    <!-- 网站底部组件 -->
    <Footer />
  </div>
</template>

<script lang="ts" setup>
import {
  PropType,
  ref,
  watch,
  reactive,
  toRefs,
  provide,
  inject,
  onBeforeMount, // 在组件挂载之前执行的函数
  onMounted,
  onBeforeUpdate, // 在组件修改之前执行的函数
  onUpdated,
  onBeforeUnmount, // 在组件卸载之前执行的函数
  onUnmounted,
  nextTick,
} from "vue";
// 引入路由
import { useRouter, useRoute } from "vue-router";
import { common, userinfo } from "/@/hooks/common";
import Footer from "/@/components/pc/Footer.vue";
import Header from "/@/components/pc/Header.vue";
import Menu from "/@/components/pc/Menu.vue";
import load from "/@/components/pc/loading.vue";
import TopIM from "/@/components/pc/TopIM.vue";
import Drawer from "/@/components/pc/Drawer.vue";

// api 接口文件
import { getdata } from "/@/api/pc/tools";
// 引入公共js文件
import utils from "/@/assets/js/public/function";

import NProgress from "nprogress";
import "nprogress/nprogress.css";

/**
 * @name: 声明data
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
const data = reactive({
  // 菜单栏关闭标识
  showRef: 0,
  // loading显示标识
  loading: true,
  // 菜单显示模式：left、top
  mode: "left",
  // 默认选中菜单
  activeKey: 0,
  // 分类列表
  categoryList: [{ id: 0, name: "1" }],
  // 工具列表
  toolsList: [],
  // 工具分类id
  category_id: -1,
  // 首次进入
  isFirst: true,
});

/**
 * @name: 将data绑定值dataRef
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-01-10
 */
const { showRef, loading, mode, activeKey, categoryList, toolsList } = toRefs(data);

// =============================================================================
// 实例化路由
const router = useRouter();
const route = useRoute();

// ===============================================================================
// 方法
// ===================================================================
// 右上角菜单
const closeMenu = (param: number) => {
  // param就是子组件传过来的值
  data.showRef = param;
};
const showMenuByChild = (param: number) => {
  data.showRef = param;
  // this.$refs.menuShowObj.getSrcList(this.showRef);
};
// ===================================================================
/**
 * @name: 获取页面数据
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2021-01-13
 */
const getData = (sign: number = 0) => {
  NProgress.start();
  // 文档 ：http://www.axios-js.com/zh-cn/docs/
  // if (sign <= 0) 
  // {
  //   if (data.isFirst) 
  //   {
  //     data.loading = true;
  //     data.isFirst = false;
  //   }
  // }
  // for (var i = 0; i < data.categoryList.length; i++) 
  // {
  //   if (sign == i) 
  //   {
  //     data.category_id = data.categoryList[i].id;
  //   }
  // }
  let param = {
    // category_id: data.category_id,
    category_id: sign,
  };
  try {
    getdata(param).then(function (response: any) {
      data.toolsList = response.toolsList;
      data.categoryList = response.array;
      data.loading = false;
      NProgress.done();
    });
  } catch (error) {
    utils.alertMsg(2000, "系统错误");
  }
};

/**
 * @name: 打开链接
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2021-01-13
 */
const openUrl = (url: string = "") => {
  window.open(url);
};

/**
 * @name: 生命周期---页面挂载完成
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
const mounted = onMounted(() => {});

// ===============================================================================
// create 调用
data.loading = false;
getData();
</script>

<style lang="scss">
// .ant-tabs-content-holder {
//   min-width: 1100px;
// }

// .ant-tabs-left > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
// .ant-tabs-right > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
// .ant-tabs-left > div > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
// .ant-tabs-right > div > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab {
//   margin: 10px 0 0 0;
// }
// .ant-tabs-left > .ant-tabs-nav .ant-tabs-tab,
// .ant-tabs-right > .ant-tabs-nav .ant-tabs-tab,
// .ant-tabs-left > div > .ant-tabs-nav .ant-tabs-tab,
// .ant-tabs-right > div > .ant-tabs-nav .ant-tabs-tab {
//   padding: 10px 20px;
//   text-align: center;
// }
// .menu-copyright {
//   position: absolute;
//   bottom: 10px;
//   width: 100%;
//   text-align: center;
// }
// .footer-main {
//   padding-top: 28px;
// }
// .ant-tabs-left > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane,
// .ant-tabs-left > div > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
//   padding-left: 0px;
//   height: 650px;
//   overflow: scroll;
// }
</style>

<style lang="scss" scoped>
@import "/@/assets/css/pc/tools.scss";
</style>
